<template>
  <view class="wrap">
    <image src="../../static/mine.png" class="mineBg"></image>
    <uv-navbar title="" autoBack placeholder bgColor="rgba(0,0,0,0)">
      <template v-slot:right>
        <view class="navRight" @click="goMsg">
          <uv-icon size="40rpx" name="bell"></uv-icon>
          <uv-badge :isDot="true" bgColor='#E43222' absolute :offset="[0, 0]" :show='showBadge'></uv-badge>
        </view>
      </template>
    </uv-navbar>
    
    <view class="userInfo" @click="goInfo">
      <view class="left">
        <view class="avatar">
          <image :src="setUrl(userInfo.avatar)" mode="aspectFill" class="img"></image>
        </view>
        <view class="user">
          <view class="title">
            <text class="name">{{ userInfo.nickname }}</text>
            <view class="cert" v-if="userInfo.is_real_auth == 0">
              <image src="../../static/certification.png" class="img"></image>
              未实名
            </view>
            <view class="cert" v-if="userInfo.is_real_auth == 1">
              <image src="../../static/certification.png" class="img"></image>
              已认证
            </view>
          </view>
          <view class="desc">ID：{{ userInfo.id }}  |  IP属地：{{ userDetail.city ? userDetail.city : '未知' }}</view>
        </view>
      </view>
      <view class="right">
        <uv-icon name="arrow-right" color="#B8B8B8" size="20rpx"></uv-icon>
      </view>
    </view>
    <view class="content" v-if="userInfo.bio">{{ userInfo.bio }}</view>
    <view class="base pt40">
      <view class="case">
        <view class="list">
          <view class="item" v-for="(item, index) in list1" :key="index" @click="goPage(item)">
            <view class="icon">
              <image :src="`../../static/mine${item.id}.png`" class="img"></image>
            </view>
            <view class="font">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="base pt24">
      <view class="case">
        <view class="small">更多功能</view>
        <view class="list">
          <view class="item" v-for="(item, index) in list2" :key="index" @click="goPage(item)">
            <view class="icon">
              <image :src="`../../static/mine${item.id}.png`" class="img"></image>
            </view>
            <view class="font">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="btn" hover-class="none" @click="layOut">退出登录</button>
    </view>
    <uv-modal ref="modal" title="提示" showCancelButton confirmColor='#E43222' @confirm="confirm">
      <view style="text-align: center;">
        是否确认退出登录
      </view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUser } from '@/store';
import { onShow } from '@dcloudio/uni-app';
import { post } from '@/api';
import { getUser, setUrl, toast } from '@/common';

const modal = ref(null);

const list1 = ref([
  {name: '我的主题', id: 1, url: '/pages/mine/myTheme/index'},
  {name: '我的收藏', id: 2, url: '/pages/mine/collect/index'},
  {name: '我的订单', id: 3, url: '/pages/mine/order/index'},
  {name: '我的账户', id: 4, url: '/pages/mine/money/index'}
])
const list2 = ref([
  {name: '浏览记录', id: 6, url: '/pages/mine/history'},
  {name: '我的投研积分', id: 7, url: '/pages/mine/integral'},
  {name: '我的直播', id: 9, url: '/pages/mine/myLive/index'},
  // {name: '我的直播', id: 9, url: ''},
  {name: '关于我们', id: 10, url: '/pages/web?id=10'},
  {name: '意见反馈', id: 11, url: '/pages/mine/feedback'},
  {name: '客服中心', id: 12, url: ''},
  {name: '服务条款', id: 13, url: '/pages/mine/terms'},
  {name: '系统设置', id: 14, url: '/pages/mine/setting/list'}
])
let showBadge = ref(false);

const userInfo = computed(() => {
  const store = useUser();
  return store.userInfo;
});
const userDetail = computed(() => {
  const store = useUser();
  return store.userDetail;
});
onShow(() => {
  getUser();
  getMessage();
})

function getMessage(){
  post('api/message/homeMessage').then(res => {
    const data = res.data;
    let sum = 0;
    for(let key in data){
      if(typeof data[key] == 'number'){
        sum += data[key]
      }
    }
    showBadge.value = sum > 0 ? true : false;
  })
}
function layOut(){
  modal.value.open();
}
function confirm(){
  toast('退出成功');
  uni.clearStorageSync();
  useUser().setToken('');
  setTimeout(() => {
    uni.reLaunch({
    	url: '/pages/login/index'
    });
  }, 1000)
}
function goMsg(){
  uni.navigateTo({
    url: '/pages/mine/message/index'
  });
}
function goInfo(){
  uni.navigateTo({
    url: '/pages/mine/info'
  });
}
function goPage(row){
  uni.navigateTo({
    url: row.url
  });
}
</script>

<style lang="scss" scoped>
  .footer{
    padding: 50rpx 30rpx;
    .btn{
      background-color: #E43222;
    }
  }
  .base{
    padding: 0 30rpx;
    position: relative;
    z-index: 3;
    &.pt40{
      padding-top: 40rpx;
    }
    &.pt24{
      padding-top: 24rpx;
    }
    .case{
      background-color: #fff;
      border-radius: 24rpx;
      padding: 30rpx 0;
      .small{
        font-weight: 500;
        font-size: 32rpx;
        color: #2B2B2B;
        padding: 0 30rpx;
        padding-bottom: 30rpx;
      }
      .list{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .item{
          width: 25%;
          text-align: center;
          margin-bottom: 40rpx;
          &:nth-child(n+9){
            margin-bottom: 0;
          }
          .icon{
            margin: 0 auto;
            width: 56rpx;
            height: 56rpx;
          }
          .font{
            font-weight: 400;
            font-size: 24rpx;
            color: #2B2B2B;
            text-align: center;
            padding-top: 8rpx;
          }
        }
      }
    }
  }
  .content{
    padding: 0 30rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #737373;
    padding-top: 40rpx;
    position: relative;
    z-index: 2;
    min-height: 160rpx;
  }
  .userInfo{
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding-top: 44rpx;
    .left{
      display: flex;
      align-items: center;
      .user{
        padding-left: 24rpx;
        .desc{
          padding-top: 12rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
        .title{
          display: flex;
          align-items: center;
          .cert{
            width: 126rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #B8B8B8;
            border-radius: 32rpx;
            font-weight: 400;
            font-size: 22rpx;
            color: #FFFFFF;
            text-align: center;
            .img{
              width: 24rpx;
              height: 20rpx;
            }
          }
          .name{
            font-weight: 500;
            font-size: 40rpx;
            color: #2B2B2B;
            padding-right: 8rpx;
          }
        }
      }
      .avatar{
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  .navRight{
    position: relative;
    width: 36rpx;
    height: 36rpx;
  }
  .mineBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>